<form id="AgregarEmpresaForm" action="{$action}" class="form-validate" method="post">
    <ul class="breadcrumb" data-connect="FormContent">
        <li><a href="#Basicos">Datos B&aacute;sicos</a></li>
        <li><a href="#Caracteristicas">Caracterizaci&oacute;n</a></li>
        <li><a href="#Ubicacion">Ubicaci&oacute;n</a></li>
    </ul>
    <div id="FormContent">
        <div id="Basicos">
            <fieldset>
                <dl>
                    <label>Nombre Empresa</label>
                    <div><input type="text" name="{bind name="nombreEmpresa" to="Nombre"}" class="required medium"/> <span title="Campo Requerido" class="obligatorio"></span></div>
                </dl>
                <dl>
                    <label>NIT/Identificaci&oacute;n</label>
                    <div><input type="text" name="{bind name="NIT" to="NIT"}" class="required number medium" /><span title="Campo Requerido" class="obligatorio"></span></div>
                </dl>
                <dl>
                    <label>Tiene Convenio con USB?</label>
                    <div>
                        <select name="{bind name="convenio" to="TieneConvenio"}" id="seleccion" >
                            <option value="true" >Si</option>
                            <option value="false" selected="selected" >No</option>
                        </select>
                    </div>
                </dl>
                <dl>
                    <label id="labelTrue" >Vigencia del Convenio</label>
                    <div id="true" >
                        <input type="text" class="datepicker" id="entrada" name="{bind name="vigenciaConvenio" to="Vigencia"|filter:"DateToJson('dd/mm/yyyy')"}" />
                    </div>
                </dl>
                <dl>
                    <div><button class="next small">Siguiente</button></div>
                </dl>
            </fieldset>
        </div>
        <div id="Caracteristicas">
            <fieldset>
                <dl>
                    <label>Sector en el que opera</label>
                    <div>
                        <select name="{bind name="sector" to="Sector"}">
                            {foreach $Sectores as $Sector}
                                <option value="{$Sector}">{$Sector@key}</option>
                            {/foreach}
                        </select>
                    </div>
                </dl>
                <dl>
                    <label>Actividad</label>
                    <div><input type="text" name="{bind name="actividad" to="Actividad"}" /></div>
                </dl>
                <dl>
                    <label>Tipo de Empresa</label>
                    <div>
                        <select name="{bind name="tipoEmpresa" to="TipoEmpresa"}">
                            {foreach $TiposEmpresas as $TipoEmpresa}
                                <option value="{$TipoEmpresa}">{$TipoEmpresa@key}</option>
                            {/foreach}
                        </select>
                    </div>
                </dl>
                <dl>
                    <div><button class="prev small">Anterior</button><button class="next small">Siguiente</button></div>
                </dl>
            </fieldset>
        </div>
        <div id="Ubicacion">
            <fieldset>
                <dl>
                    <label>Direcci&oacute;n</label>
                    <div><input type="text" name="{bind name="direccion" to="DatosContacto.Direccion"}" class="required" /> <span title="Campo Requerido" class="obligatorio"></span></div>
                </dl>
                <dl>
                    <label>N&uacute;mero Telef&oacute;nico</label>
                    <div><input type="text" name="{bind name="telefono" to="DatosContacto.Telefono"}" class="required number small" /> <span title="Campo Requerido" class="obligatorio"></span></div>
                </dl>
                <dl>
                    <label>Pais</label>
                    <div>
                        <select name="pais" id="pais" class="required">
                            <option>- Seleccione -</option>
                            {foreach $paises as $pais}
                                <option value="{$pais->GetNombre()}" {if $pais->getNombre() == 'COLOMBIA'}selected{/if}>
                                    {$pais->GetNombre()}
                                </option>
                            {/foreach}
                        </select>
                        <span title="Campo Requerido" class="obligatorio"></span>
                    </div>
                </dl>
                <dl>
                    <label>Departamento</label>
                    <div>
                        <select name="departamento" id="departamento" class="required">
                            
                        </select>
                        <span title="Campo Requerido" class="obligatorio"></span>
                    </div>
                </dl>
                <dl>
                    <label>Ciudad</label>
                    <div>
                        <select name="{bind name="municipio" to="DatosContacto.Municipio.CodigoMunicipio"}" id="municipio" class="required">
                            
                        </select>
                        <span title="Campo Requerido" class="obligatorio"></span>
                    </div>
                </dl>
                <dl>
                    <div>
                        <button class="prev small">Anterior</button>
                    </div>
                </dl>
            </fieldset>
            <button id="SubmitButton" class="i_cassette icon" >Guardar</button><span class="wl_formstatus"></span>
        </div>
    </div>
</form>

<script>
    {literal}
        
        require(["jquery", "Acaweb.AjaxRequest", "init"], function(jQuery, Acaweb){
            
            jQuery(document).ready(function($){

                /*Selector de Vigencia*/
                $('#true').hide();
                $('#labelTrue').hide();

                $('#seleccion').change(function(){
                    var val = $(this).val();
                    if(val == "true"){
                        $('#true').show();
                        $('#labelTrue').show();
                        $('#entrada').addClass('required');
                    }else{
                        $('#true').hide();
                        $('#labelTrue').hide();
                        $('#entrada').removeClass('required');
                    }
                });

                $('#seleccion').change();

                /*Enlace de Ciudades con paises*/
                $.ajaxSetup({
                cache: false
                });

                var locaciones = new Acaweb.Locaciones();

                $("#pais").change(function(){
                    $("#departamento").html("");
                    $("#municipio").html("");
                    var valor = $("#pais").val();
                    locaciones.error = function(){

                    }    
                    locaciones.success = function(data){
                        var departamentos = "<option>- Seleccione -</option>";
                        $.each(data, function(k, departamento){
                            departamentos += "<option value='" + departamento.Nombre + "'>";
                            departamentos +=  departamento.Nombre;
                            departamentos += "</option>";
                        })

                        $("#departamento").html(departamentos);
                    }

                    locaciones.GetDepartamento(valor);
                });

                $("#departamento").change(function(){
                    $("#municipio").html("");
                    var valor = $("#departamento").val();
                    locaciones.error = function(){
                        alert("Boom...!");
                    }    
                    locaciones.success = function(data){
                        var municipios = "<option>- Seleccione -</option>";
                        $.each(data, function(k, municipio){

                            municipios += "<option value='" + municipio.CodigoMunicipio + "'>";
                            municipios +=  municipio.Nombre;
                            municipios += "</option>";
                        })

                        $("#municipio").html(municipios);
                    }

                    locaciones.GetMunicipioByNombreDepartamento(valor);
                });

            });
        });
    {/literal}
</script>
